<template>
    <view class="content">
		<view class="toper">
			<image src="../../static/page/top2.png" mode="widthFix" class="clase-top"></image>
			
			<view class="prompt" :style="height">
				<image src="../../static/page/love.png" mode="widthFix" class="pt-img"></image>
				<view class="pt-text">{{i18n.main.have}}{{quantity}}{{i18n.main.match}}</view>
			</view>
		
			<view class="love" @click="reservation(quantity)">
				<image src="../../static/page/love1.png" mode="widthFix" class="love-img"></image>
				<view class="love-text">
					<view class="love-num">
						{{quantity}}
					</view>
					
					<view class="lo-text" v-if="quantity > 0">{{i18n.main.apply}}</view>
					<view class="lo-text2" v-else>{{i18n.main.applied}}</view>
				</view>
			</view>
				
			<view class="bottom">
				<view class="record">
					<view class="title">
						* 申请规则 *
					</view>
					<view class="cont">
						1、普通会员每天可申请匹配一次，不需要等前面的订单完成。<br />
						2、每推三个有效直推可多加每天一次， 每天最多都能申请三次。<br />
						举个例子：<br />
						无推荐人员就每天一次。<br />
						3个直推就可以每天两次。<br />
						6个直推就可以每天三次。<br />
					</view>
				</view>
			</view>
		</view>
		
		<image src="../../static/page/page.png" mode="" class="back_img"></image>
    </view>
</template>

<script>
	import mIcon from '@/components/m-icon/m-icon.vue';
	import service from '../../service.js';

	export default {
		computed: {
			i18n () {
				return this.$t('index');
			}
		},
		components: {
			mIcon
        },
		data() {
			return {
				token:uni.getStorageSync('token'),
				lang:uni.getStorageSync('lang'),
				height:'height: 20px;',
				quantity:1,
			};
		},
		onShow:function(){
			uni.setNavigationBarTitle({
				title: this.i18n.pages.match
			});
			uni.setStorageSync('type',1);
			service.auth(this, service.api.main.recount, {
				
			}, function(self, res) {
				res = res.data;
				self.quantity = res.res_count - res.res_total;
			});
		},
		methods:{
			reservation(num){
				service.upload(this, service.api.main.reservation, {
					
				}, '', '', function(self, res) {
					uni.showToast({
						icon: 'none',
						title: res.info
					});
					if (res.code == 1) {
						self.quantity--;
					}
				});
			}
		}
    }
</script>

<style>
	.content{
		padding: 0;
		background: #F2F2F2;
	}
	.toper{
		z-index: 30;
		width: 100%;
	}
	.clase-top{
		z-index: 40;
		position: relative;
		width: 100%;
		height: 320upx;
		/* #ifndef H5 */
		height: 350upx;
		/* #endif */
		
	}
	.prompt{
		z-index: 50;
		position: relative;
		width: 86%;
		margin: 0 7%;
		padding: 20upx 0;
		margin-top: -200upx;
		line-height: 40upx;
		border-radius: 40upx;
		background: rgba(255,255,255,.3);
	}
	.pt-img{
		float: left;
		width: 80upx;
		height: 80upx;
		margin: -20upx;
	}
	.pt-text{
		color: #FFFFFF;
		font-size: 28upx;
		padding-left: 80upx;
		padding-right: 10upx;
	}
	.love{
		width: 400upx;
		height: 400upx;
		margin: 120upx calc(50% - 200upx) 0;
	}
	.love-img{
		z-index: 50;
		width: 100%;
		height: 100%;
		position: relative;
	}
	.love-text{
		z-index: 60;
		position: relative;
		text-align: center;
		margin-top: -320upx;
	}
	.love-num{
		color: #FFFFFF;
		font-size: 100upx;
	}
	.lo-text,.lo-text2{
		color: #EDF264;
		font-size: 32upx;
		font-weight: bold;
		line-height: 50upx;
	}
	.lo-text2{
		color: #555555;
	}
	.back_img{
		margin: 0;
	}
	.bottom{
		z-index: 40;
		margin: 0 40upx 140upx;
		position: absolute;
		border-radius: 20upx;
		height: 460upx;
		border: 6upx solid #F76671;
		/* #ifndef H5 */
		margin-top: 100upx;
		/* #endif */
		width: calc(100% - 92upx);
	}
	.record {
		z-index: 40;
		display: flex;
		height: 460upx;
	    flex-wrap: wrap;
		position: absolute;
		flex-direction: row;
		display: inline-flex;
		width: 100%;
	}
	.title{
		width: 100%;
		height: 90upx;
		color: #F76671;
		font-size: 50upx;
		line-height: 90upx;
		text-align: center;
	}
	.cont{
		color: #F76671;
		padding: 0 20upx;
		font-size: 28upx;
		line-height: 44upx;
	}
</style>
